<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就诊人管理</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="/img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="/element/element-ui.css">
    <link rel="stylesheet" href="/css/userInfo.css">
</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20" v-loading="loading">
                            <!--右边卡片-->
                            <el-card shadow="hover">
                                <!--页面内容-->
                                <el-row>
                                    <el-col>
                                        <p><strong>就诊人管理</strong></p>
                                        <p style="margin: 16px 0">1.注册账号最多可以同时绑定三个就诊人</p>
                                        <p style="margin: 16px 0">2.注册账号每自然年内，最多可以绑定四位就诊人</p>
                                    </el-col>
                                    <!--获取当前账号的一位或多位用户-->
                                    <el-col>
                                        <el-row style="margin-top: 20px" gutter="50">
                                            <el-col span="9">
                                                <el-card style="background: #89c4ed" class="patients-card">
                                                    <el-row>
                                                        <el-col span="18">
                                                            <el-tag size="medium">号主</el-tag>
                                                            <span>{{patients}}</span>
                                                            <span>176***6395</span>
                                                        </el-col>
                                                        <el-col span="6">
                                                            <span><el-link :underline="false">查看详情</el-link></span>
                                                        </el-col>
                                                    </el-row>
                                                </el-card>
                                            </el-col>
                                            <!--子用户-->
                                            <el-col span="9" v-for="patients in listPatientsData">
                                                <el-card style="background: #89c4ed" class="patients-card">
                                                    <el-row>
                                                        <el-col span="18">
                                                            <el-tag size="medium">子用户</el-tag>
                                                            <span>{{patients.nickname}}</span>
                                                            <span>{{patients.phone}}</span>
                                                        </el-col>
                                                        <el-col span="6">
                                                            <span><el-link :underline="false">查看详情</el-link></span>
                                                        </el-col>
                                                    </el-row>
                                                </el-card>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top: 20px">
                                    <el-col>
                                        <el-card @click.native="addPatients()" shadow="hover">
                                            <p style="text-align: center">+ 添加就诊人</p>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--对话框-->
        <el-dialog title="就诊人信息" :visible.sync="dialogVisible" width="30%" center>
            <el-form  @submit.native.prevent :model="patientsForm" status-icon :rules="patientsRules" ref="patientsForm" label-width="80px">
                <el-form-item label="姓名" prop="nickname">
                    <el-input v-model="patientsForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="patientsForm.gender" label="1">男</el-radio>
                    <el-radio v-model="patientsForm.gender" label="0">女</el-radio>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="patientsForm.birthday"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="patientsForm.address"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="patientsForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="工作">
                    <el-input v-model="patientsForm.job"></el-input>
                </el-form-item>
                <el-form-item label="提示">
                    <span>该操作表示为当前账号添加就诊人，一个账号可以添加多个就诊人，最多可以保存四个就诊人信息</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitPatientsForm">确 定</el-button>
            </div>
        </el-dialog>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- 引入Vue和Element UI库 -->
<script src="/js/vue.js"></script>
<script src="/element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="/js/axios.js"></script>
<!--引入自定义header-->
<script src="/js/index-header.js"></script>
<!--引入自定义footer-->
<script src="/js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="/js/index-left-card.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                /*加载f*/
                loading: false,
                // 就诊人
                patients: localStorage.getItem("currentNickName"),
                dialogVisible: false,
                listPatientsData:[],
                patientsForm: {
                    //用户id
                    parentUser:localStorage.getItem("currentUsername"),
                    nickname: '',
                    gender: '',
                    birthday: '',
                    address: '',
                    phone: '',
                    job: '',
                },
                patientsRules: {
                    nickname: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    birthday:[
                        {required: true, message: '请输入出生日期', trigger: 'blur'}
                    ],
                    phone:[
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                    ],
                },

            }
        },
        methods: {
            //添加就诊人
            addPatients() {
                v.dialogVisible = true;
            },
            //添加就诊人表单
            submitPatientsForm(){
                this.$refs.patientsForm.validate((valid) => {
                    if (valid) {
                        //为当前账号添加用户
                        axios.post("/pa/userChild/insert",v.patientsForm).then(function (res) {
                            if (res.data.data===1){
                                //数据添加成功
                                v.$message.info("用户添加成功");
                                //清除表单
                                v.patientsForm=[];
                            }else {
                                v.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        //表单验证不通过
                        v.$message.error("表单验证不通过");
                    }
                });
            },
            //获取子用户信息
            listPatientsChild(){
                let parentUsername= this.userId=localStorage.getItem("currentUsername");
                axios.get("/pa/userChild/listUserChildByParentId/"+parentUsername,{headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code===1){
                        v.listPatientsData=res.data.data;
                    }else {
                        v.$message.error(res.data.msg);
                    }
                })
            },
            //获取用户状态
            getUserStatus(){
                axios.get("/pa/userChild/getUserStatus",{headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.data!==1){
                        this.$message.info("未登录，请先登录")
                    }
                })
            }

        },
        created() {
        },
        mounted() {
            //检测用户是否携带jwt是否有效
            this.getUserStatus();
            this.listPatientsChild();
        },
        watch() {

        }
    })
</script>
</html>